import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state = {
  // 在main中引入过store之后，这个地方的state就能在其他组件中访问了
  // 一开始定义为空，在登陆成功之后再给他赋值，赋登陆成功的那个人的名字
  username: '',
}
// 赋值的话，就需要在mutations中赋值,他是一个对象,保存的是更改state的函数，也只有它能更改state中的值，
// 触发方式是：this.$store.commit('函数名'，参数)
const mutations = {
  //括号中的username是一个形参，当传过来username的时候，就将state中的username修改为传过来的uesrname
  // 那么这个username是从哪里传过来的呢？他是在登陆页面，登陆成功后传过来的。所以需要在登陆页面登陆成功的
  // 时候将username保存到vuex的state中
  setUsername: (state, username) => {
    state.username = username
    // 做完以上其实就已经能够实现登陆成功之后显示登陆者名字，但是当再次刷新页面，名字不见了：
    // 原因是vuex管理的数据状态是应用级的，也就是说，当重新点击属性之后，整个程序会重新执行一遍，
    // 也就是说，state中的username还是为空，就回出现名字不见的这种情况。怎么解决呢，可以用以下方法，
    // 将登陆成功后的用户的名字存入到localStorage中，下次刷新的时候直接从localStorage中取值，那么怎么取值呢，可以在getters中取
    localStorage.setItem('username', username)
  }
}
const actions = {}

const getters = {
    // 这个方法是直接把localStorage中的值取出来放到getUsername这个方法中了，调用他就直接返回一个名字，
    // 所已在home中直接$store.getters.getUsername调用就可以了
  getUsername: (state) => localStorage.getItem('username'),
}
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
